<template>
  <div>
      <!-- <div>业绩表现：年化收益和夏普率
最大回撤、收益率、夏普率(波动率)、资产、
      </div> -->
      <div v-if="onLoad == 'wait'" class="onload">
           <Spin fix>
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>正在回测，请稍等</div>
            </Spin> 
      </div>
      <div v-else-if="onLoad == 'err'">
          回测出错
      </div>
      <div v-else>
        <div>回测起始时间：{{start_date}} 至 {{end_date}}</div>
          
          <!-- 年收益率 -->
        <maxdraw-line idname='maxdraw' title="年收益率" :y="AnnualizedYield_one_ratelist" :x='AnnualizedYield_one_timelist'></maxdraw-line>
        <!-- 半年年化收益率 -->
        <maxdraw-line idname="earnings" title="半年年化收益率" :y="AnnualizedYield_half_ratelist" :x='AnnualizedYield_one_timelist'></maxdraw-line>

        <!-- 最大回撤 -->
        <maxdraw-line idname="shape" title="最大回撤" :y="retracementRate_ratelist" :x='AnnualizedYield_one_timelist'></maxdraw-line>

        <!-- 夏普率（波动率） -->
        <maxdraw-line idname="assets" title="夏普率" :y="sharp_ratio_ratelist" :x='AnnualizedYield_one_timelist'></maxdraw-line>
      </div>
      

  </div>
</template>

<script>
import maxdrawLine from './charts/maxdrawLine.vue'
import {do_backtest_annualized, backtestFund} from '@/api/api.js'
export default {
    components: { maxdrawLine },
    beforeCreate() {
        console.log('回测beforeCreate')
        
    },
    created() {
        // this.do_backtest_annualized()
        this.backtestFund()
        console.log('回测created')
        // console.log(this.$store.getters.fundCodeList)
    },
    beforeMount() {
        console.log('回测beforeMount')
        
    },
    mounted() {
        console.log('回测mounted')
        

    },
    beforeUpdate() {
        console.log('回测beforeUpdate')

    },
    updated() {
        console.log('回测updated')
    },
    beforeDestroy() {
        console.log('回测beforeDestroy')
    },
    destroyed() {
        console.log('回测destroyed')
    },
    deactivated() {
        console.log('回测deactivated')
        this.onLoad = 'wait'
    },
    activated() {
        this.backtestFund()
        console.log('回测activated')
    },
    data() {
        return {
            onLoad:'wait',
            timelist:[],
            half_ratelist:[],
            half_timelist:[],
            ratelist:[],
            // 第二个接口的
            AnnualizedYield_one_timelist:[],
            AnnualizedYield_one_ratelist:[],
            AnnualizedYield_half_ratelist:[],
            retracementRate_ratelist:[],
            sharp_ratio_ratelist:[]
        }
    },
    methods:{
        do_backtest_annualized(){
            let data={
                "fund_list":[
                    [ "161911", "164810","164401", "501006", "168001", "164402", "150105", "167601", "162413", "160420"], 
                    [10.0, 10.0,10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0]
                ]
            }

            do_backtest_annualized(data)
            .then(res => {
                console.log(res)
                this.timelist = res.timelist
                this.half_ratelist = res.half_ratelist
                this.half_timelist = res.half_timelist
                this.ratelist = res.ratelist
                
                this.onLoad = 'success'


            })
        },
        backtestFund() {
            let data = {
                "start_date":this.$store.state.start_date,
                "end_date":this.$store.state.end_date,
                // "codelist":["150008","150009"],
                "codelist":this.$store.getters.fundCodeList,
                "percentlist":this.$store.getters.fundRateList
            }
            console.log(data)
            backtestFund(data)
            .then(res => {
                let data = res
                // console.log(res)
                // let data = JSON.parse( res.replace(/NaN/g,0) )
                // console.log(data)
                this.AnnualizedYield_one_timelist = data.AnnualizedYield_one_timelist
                this.AnnualizedYield_one_ratelist = data.AnnualizedYield_one_ratelist
                this.AnnualizedYield_half_ratelist = data.AnnualizedYield_half_ratelist
                this.retracementRate_ratelist = data.retracementRate_ratelist
                this.sharp_ratio_ratelist = data.sharp_ratio_ratelist
                this.start_date = this.AnnualizedYield_one_timelist[0]
                this.end_date = this.AnnualizedYield_one_timelist[this.AnnualizedYield_one_timelist.length - 1]
                this.onLoad = 'success'


            })
            .catch(err => {
               this.onLoad = 'err'

            })
        }
    }
}
</script>

<style scoped>

.demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}
</style>